{include file="public/header"/}
<script type="text/javascript" src='__libs__/echarts/echarts.min.js'></script>
<div id="container" style="overflow-y: auto">
    <div class="layui-fluid">
        <div class="layui-col-sm12">
            <div class="layui-card">
              <div class="layui-card-header" style="font-size:20px;">
                  数据总览
              </div>    
            </div>
        </div> 
        <div class="layui-row layui-col-space15">   
          <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
              <div class="layui-card-header">
                当前咨询用户数
                <span class="layui-badge layui-bg-blue layuiadmin-badge">咨询</span>
              </div>
              <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">{$talking}</p>
                <p>
                当前在线客服数 
                  <span class="layuiadmin-span-color">{$services} <i class="layui-icon">&#xe63a;</i></span>
                </p>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
              <div class="layui-card-header">
                当前排队用户数
                <span class="layui-badge layui-bg-cyan layuiadmin-badge">排队</span>
              </div>
              <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font">{$waiter}</p>
                <p>
                  接待总用户数
                  <span class="layuiadmin-span-color">{$getinall} <i class="layui-icon">&#xe610;</i></span>
                </p>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
              <div class="layui-card-header">
                今日聊天消息数
                <span class="layui-badge layui-bg-green layuiadmin-badge">消息</span>
              </div>
              <div class="layui-card-body layuiadmin-card-list">
      
                <p class="layuiadmin-big-font">{$nowchats}</p>
                <p>
                  聊天消息总数 
                  <span class="layuiadmin-span-color">{$chatsall} <i class="layui-icon">&#xe667;</i></span>
                </p>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
              <div class="layui-card-header">
                今日评价用户数
                <span class="layui-badge layui-bg-orange layuiadmin-badge">评价</span>
              </div>
              <div class="layui-card-body layuiadmin-card-list">
      
                <p class="layuiadmin-big-font">{$nowcomments}</p>
                <p>
                  总评价用户数
                  <span class="layuiadmin-span-color">{$allcomments}<i class="layui-icon">&#xe600;</i></span>
                </p>
              </div>
            </div>
          </div>   
        </div>
      <div class="layui-col-sm12">
        <div class="layui-card">
          <div class="layui-card-header" style="font-size:20px; margin-top: 20px;">
              今日客服服务数据趋势
          </div>    
        </div>
    </div>
      <div id="wolivedatas" class="shujubiao" style="width: 100%;height:500px;margin-top: 69px;"></div>
    </div>  
</div>

<script type="text/javascript">
  

 
var myChart = echarts.init(document.getElementById('wolivedatas'));

var option = {
    title: {
        text: '',
        padding: '10,0,0,0'
    },
    tooltip: {
        trigger: 'axis'
    },
    color:['#ff5c5c','#7571f9','#8bd8ab'],
    legend: {
        y: '400px',
        zlevel:'99',
        data: [{name:'会话总量',textStyle: {color: '#555555'}}, {name:'接入会话总量',textStyle: {color: '#555555'}}]
    },
    grid: {
        top: '50',
        left: '3%',
        right: '4%',
        bottom: '125',
        width: '100%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        splitLine: {
            show: true,
            lineStyle:{
                type:'dashed'
            }
        },
        type: 'category',
        boundaryGap: false,
        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '00:00']
    },
    yAxis: {
        splitLine: {
            show: true,
            lineStyle:{
                type:'dashed'
            }
        },
        type: 'value',
        max: 'dataMax',
        min: "dataMin",
    },
    series: [

        {
            name: '会话总量',
            type: 'line',
            smooth: true,
            data: [{$chatsdata[0]}, {$chatsdata[1]}, {$chatsdata[2]}, {$chatsdata[3]}, {$chatsdata[4]}, {$chatsdata[5]}, {$chatsdata[6]}, {$chatsdata[7]}, {$chatsdata[8]}]
        },
        {
            name: '接入会话总量',
            type: 'line',
            smooth: true,
            data: [{$getindata[0]}, {$getindata[1]}, {$getindata[2]}, {$getindata[3]}, {$getindata[4]}, {$getindata[5]}, {$getindata[6]}, {$getindata[7]}, {$getindata[8]}]
        }
    ]
};


myChart.setOption(option);	
	
</script>


{include file="public/footer"/}


